{% extends "base.html" %}

{% block title %}导航页{% endblock %}

{% block head %}
  {{ super() }}
  <!-- DataTables -->
  <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
{% endblock %}

{% block content %}
  <!-- 页面头 -->
  <section class="content-header">
    <!--头部标题-->
    <h1>
      导航页
      <!--    <small>运维大盘</small>-->
    </h1>
    <!--面包屑-->
    <ol class="breadcrumb">
      <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
      <li class="active">导航页</li>
    </ol>
  </section>

  <!-- 页面内容 -->
  <section class="content">

    <!-- 状态卡片 -->
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>{{ data.jobs_undo }}</h3>
            <p>审批工单(待审批)</p>
          </div>
          <div class="icon">
            <i class="ion ion-checkmark-circled"></i>
          </div>
          <a href="/job" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
          <div class="inner">
            <h3>{{ data.cluster_all }}</h3>
            <p>K8s集群</p>
          </div>
          <div class="icon">
            <i class="ion ion-cube"></i>
          </div>
          <a href="/cluster" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
          <div class="inner">
            <h3>{{ data.cloud_resource_all }}</h3>
            <p>云资源</p>
          </div>
          <div class="icon">
            <i class="ion ion-cloud"></i>
          </div>
          <a href="/cmdb/cloud_resource" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
          <div class="inner">
            <h3>{{ data.alerts_firing }}</h3>
            <p>告警(未处理)</p>
          </div>
          <div class="icon">
            <i class="ion ion-alert-circled"></i>
          </div>
          <a href="/alarm/prom/" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->

    <!--  可用性检测box  -->

{#    <div class="row">#}
{#      <div class="col-xs-12">#}
{#        <div class="box">#}
{#          <div class="box-header with-border">#}
{#            <h3 class="box-title">可用性监测（1h）</h3>#}
{#            <div class="box-tools pull-right">#}
{#              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>#}
{#              </button>#}
{#              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>#}
{#            </div>#}
{#          </div>#}
{#          <!-- /.box-header -->#}
{#          <div class="box-body">#}
{#            <!-- 站点可用性（方块） -->#}
{#            <div class="row" id="aval_box" style="min-height: 170px">#}
{#            </div>#}
{#            <!-- /.row -->#}
{#          </div>#}
{#          <!-- Loading (remove the following to stop the loading)-->#}
{#          <div id="loading" class="overlay" style="display: block">#}
{#            <i class="fa fa-refresh fa-spin"></i>#}
{#          </div>#}
{#          <!-- end loading -->#}
{#        </div>#}
{#      </div>#}
{#    </div>#}

    <div class="row">
      <div class="col-xs-12">
        <!--表格1-->
        <div class="box">
          <div class="box-header with-border">
            <h3 class="box-title">常用导航</h3>
            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example1" class="table table-bordered table-hover">
              <thead>
              <tr>
                <th>名称</th>
                <th>地址</th>
                <th>备注</th>
              </tr>
              </thead>
              <tbody>
              {% for i in data.nav_links %}
                <tr>
                  <td>{{ i.name }}</td>
                  <td><a href="{{ i.url }}" target="_blank">{{ i.url }}</a></td>
                  <td>{% if i.comment %} {{ i.comment }} {% endif %}</td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
  <!-- /.页面内容 -->
{% endblock %}

{% block script %}
  <!-- DataTables -->
  <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
  <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  <script>
      function refreshAval() {
          $('#loading').show();
          $('#aval_box').empty();
          $.get('/api/v1/aval/list', function (data) {
              if (data.message === 'ok') {
                  console.log(data)
                  for (let i in data.data) {
                      let color = "bg-green"
                      if (data.data[i].aval_1h < 0.99) {
                          color = 'bg-yellow'
                      }
                      if (data.data[i].aval_1h < 0.9) {
                          color = 'bg-red'
                      }
                      if (data.data[i].acc_5m < 0.8) {
                          color = 'bg-yellow'
                      }
                      if (data.data[i].acc_5m < 0.5) {
                          color = 'bg-red'
                      }
                      let t = "    <div class=\"col-lg-2 col-xs-4\">\n" +
                          "      <div class=\"small-box " + color + "\">\n" +
                          "        <div class=\"inner\" style=\"text-align: center\">\n" +
                          "          <p>" + data.data[i].name + "</p>\n" +
                          "          <h3>" + data.data[i].aval_1h * 100 + "<sup style=\"font-size: 20px\">%</sup></h3>\n" +
                          "          <p style='color:rgba(255,255,255,0.8); font-size: 13px; margin-bottom: 0'>延迟:" + data.data[i].lat_1h + "s   采样率:" + data.data[i].acc_5m + "</p>\n" +
                          "        </div>\n" +
                          "        <a href=\"/aval/monitor/" + data.data[i].id + "\" class=\"small-box-footer\">更多信息 <i class=\"fa fa-arrow-circle-right\"></i></a>\n" +
                          "      </div>\n" +
                          "    </div>"
                      $('#aval_box').append(t)
                  }
                  ;
                  $('#loading').hide()
              }
          });
      }

      $(function () {
          $('#example1').DataTable({
              language: {"url": "/static/language.json"},
              "paging": false,
              "lengthChange": false,
              "searching": false,
              "ordering": false,
              "info": false,
              "autoWidth": true,
              "responsive": true,
          });


          // 刷新网站可用性检测数据
          // refreshAval();


          // 设置自动刷新可用性
          // let a = 1;
          // let b = true;
          //
          // function do1() {
          //     if (!b) return;
          //     console.log("刷新次数：", a++)
          //     refreshAval();
          //     setTimeout(do1, 60000); // 每60秒刷新一次
          // }
          //
          // do1();

          bootbox.alert('此演示版主要功能如下：' +
              '<br>1. k8s管理：资源查看、容器日志、执行命令行、YAML查看和编辑等' +
              '<br>2. 工单审批：可创建工单更新k8s容器，钉钉通知，审批通过后自动更新' +
              '<br>3. 告警管理：接入Prometheus或skywalking告警，存入数据库并前端展示' +
              '<br>4. CMDB：基于Excel的资产管理表格页面，基于多字段匹配更新，实现操作幂等性' +
              '<br>5. 云运营报表：调用阿里云OpenAPI，获取资源信息和监控，并输出报表'
          )
      });
  </script>
{% endblock %}